<template>
  <div class="login-box">
    <el-dialog title="" :visible.sync="loginShow" @closed="closed">
      <div class="login-fixed">
        <div class="close-btn" @click="close">
          <img src="~img/close.png" alt="" />
        </div>
        <div class="form" v-show="formType === 'login'">
          <div class="title">登录</div>
          <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="90px">
            <el-form-item label="账号" prop="account">
              <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn" @click="sendLogin">登录</div>
          <div class="tips">没有账号<span @click="formType = 'register'">去注册</span></div>
        </div>
        <div class="form" v-show="formType === 'register'">
          <div class="title">注册</div>
          <el-form :model="reginterForm" :rules="reginterRules" ref="reginterForm" label-width="90px">
            <el-form-item label="账号" prop="account">
              <el-input v-model="reginterForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="reginterForm.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="reginterForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn" @click="sendRegister">注册</div>
          <div class="tips">已有账号<span @click="formType = 'login'">立即登录</span></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { loginApi, registerApi } from '@/api/api'
export default {
  data() {
    return {
      loginShow: false,
      formType: 'login',
      loginForm: {
        account: '',
        password: ''
      },
      loginRules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      reginterForm: {
        nickname: '',
        account: '',
        password: ''
      },
      reginterRules: {
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    open() {
      this.loginShow = true
    },
    close() {
      this.loginShow = false
    },
    closed() { },
    sendLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          loginApi({
            ...this.loginForm
          }).then(res => {
            if (res.errno === 0) {
              this.$message({
                message: '登录成功',
                type: 'success'
              })
              this.COMMON.setStorage('token', res.data.user_token)
              setTimeout(() => {
                window.location.reload()
              }, 800)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    sendRegister() {
      this.$refs.reginterForm.validate(valid => {
        if (valid) {
          registerApi({
            ...this.reginterForm
          }).then(res => {
            if (res.errno === 0) {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              this.formType = 'login'
              this.loginForm.account = this.reginterForm.account
              this.loginForm.password = this.reginterForm.password
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  /deep/ .el-dialog {
    background-color: transparent;
    .w(1415);
    .h(943);
    transform: scale(0.8);
    box-shadow: none;
    margin-top: 0 !important;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}

.login-fixed {
  .w(1415);
  .h(943);
  background: url(../assets/login-bg.png);
  border-radius: 42px;
  .padding(44, 10, 10, 10);
  position: relative;
  overflow: hidden;

  .close-btn {
    position: absolute;
    .w(26);
    .h(26);
    .right(56);
    .top(40);
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .form {
    position: absolute;
    width: 540px;
    top: 132px;
    right: 227px;
    .title {
      text-align: center;
      font-size: 46px;
      line-height: 66px;
      font-weight: 700;
      color: #333;
      margin-bottom: 58px;
    }
    .el-form {
      padding-bottom: 30px;
    }
    .el-form-item {
      height: 60px;
      margin-bottom: 38px;
      /deep/ .el-form-item__label {
        font-size: 30px;
        text-align: left;
        line-height: 60px;
        color: #333;
        &:before {
          display: none;
        }
      }
      /deep/ .el-form-item__error {
        font-size: 18px;
      }
      /deep/ .el-form-item__content {
        line-height: 60px;
        font-size: 24px;
        .el-input {
          font-size: 24px;
        }
        .el-input__inner {
          height: 60px;
          line-height: 60px;
        }
      }
    }
    .btn {
      color: #fff;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: @base-color;
      color: #fff;
      font-size: 30px;
      border-radius: 8px;
      cursor: pointer;
    }
    .tips {
      margin-top: 26px;
      font-size: 21px;
      color: #9a9a9a;
      height: 30px;
      line-height: 30px;
      text-align: right;
      span {
        cursor: pointer;
        color: @base-color;
        margin-left: 20px;
      }
    }
  }
}
</style>
